import React from 'react';
import { Modal, Form, Spin, Input, Select, DatePicker } from 'antd';
import moment from 'moment'

const { Option } = Select;

@Form.create()
class AddModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateTime: '',
      selectedRowKeys: [],
    };
  }

  handleOk = e => {
    const { onOk, form } = this.props;
    const { validateFields, getFieldsValue } = form;
    let _this = this;
    validateFields(errors => {
      if (errors) {
        return;
      }
      const data = { ...getFieldsValue() };
      data.roleId = _this.props.roleDetail&&_this.props.roleDetail.roleId?_this.props.roleDetail.roleId:'';
      onOk(data);
    });
  };

  handleCancel = e => {
    const { onCancel } = this.props;
    onCancel();
  };

  timeSelect = (value, dateString) => {
    this.setState({
      dateTime: dateString,
    });
  };

  render() {
    const { form, loading, roleDetail, pwdTypeList, ...addModalProps } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    console.log(roleDetail,'roleDetail')
    return (
      <Modal {...addModalProps} onOk={this.handleOk} onCancel={this.handleCancel}>
        <Spin spinning={loading}>
          <Form style={{ paddingRight: '20px' }} name="roleCode" {...formItemLayout}>
            <Form.Item label="角色编码" name="roleCode">
              {getFieldDecorator('roleCode', {
                initialValue: roleDetail && roleDetail.roleCode ? roleDetail.roleCode : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入角色编码',
                  },
                ],
              })(<Input placeholder="请输入角色编码" />)}
            </Form.Item>
            <Form.Item label="角色名称" name="roleName">
              {getFieldDecorator('roleName', {
                initialValue: roleDetail && roleDetail.roleName ? roleDetail.roleName : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入角色名称',
                  },
                ],
              })(<Input placeholder="请输入角色名称" />)}
            </Form.Item>
            <Form.Item label="角色状态" name="statusCd">
              {getFieldDecorator('statusCd', {
                initialValue: roleDetail && roleDetail.statusCd ? roleDetail.statusCd.toString() : '',
                rules: [
                  {
                    required: true,
                    message: '请选择角色状态',
                  },
                ],
              })(
                <Select placeholder="请选择状态">
                  <Option value="1">在用</Option>
                  <Option value="2">删除</Option>
                </Select>,
              )}
            </Form.Item>
            <Form.Item label="用户描述" name="remark">
              {getFieldDecorator('remark', {
                initialValue: roleDetail && roleDetail.remark ? roleDetail.remark : '',
                // initialValue: '',
                rules: [
                  {
                    required: false,
                    message: '请输入用户描述',
                  },
                ],
              })(<Input placeholder="请输入用户描述" />)}
            </Form.Item>
          </Form>
        </Spin>
      </Modal>
    );
  }
}

export default AddModal;
